<template>
  <div class="wrapper">
    <header>
      <ul>
        <li>
          <img
            @click="go"
            style="width:30px; height:30px; margin-top:11px;"
            src="@/assets/school/school.jpg"
            alt
          />
        </li>
        <li>北京市朝阳区青年路</li>
        <li style="font-size:15px;">
          <router-link to="/city">
            <!-- <p>{{from1.province_id}}</p> -->
            <span>{{from.name}}</span>
            <i class="iconfont">&#xe606;</i>
          </router-link>
        </li>
      </ul>
    </header>
    <div class="nav-content">
      <!-- <router-link to="/introduce"> -->
      <div
        class="smoa-con"
        v-for="(item,index) in title"
        :key="index"
        @click="banner(item.school_id)"
      >
        <img :src="item.img" alt />
        <ul>
          <li>{{item.name}}</li>
          <li style="width:200px; height:40px;">{{item.desc}}</li>
          <li>{{item.distance}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { YFhomeList } from "../request/api";
export default {
  name: "",
  data() {
    return {
      title: [],
      from:[],
      // from1:[],
      // province_id:""
    };
  },
  props: {},
  components: {},
  mounted() {
    // var province_id = this.from
    this.from = this.$route.query.nav
    console.log(this.from)
    // console.log(this.from.province_id)
    let obj = {
      uid: 1,
      type:1,
      lon: 116.523852,
      lat: 39.933697,
      province_id: this.from.province_id,
      page: 1
    };
    YFhomeList(obj).then(res => {
      console.log(res.data.data);
      this.title = res.data.data;
      // this.from1 = res.data.data
    });
  },
  methods: {
    go() {
      this.$router.go(-1);
    },
    banner(item) {
      this.$router.push({
        path: "/introduce",
        query: { id: item }
      });
    }
  },
  watch: {}
};
</script>

<style scoped>
.home-header{
  width:4.8rem;
  height:0.56rem;
  border:0.01rem solid red;
  /* background :$bgColor; */
  color:#fff;
  }
  
.wrapper {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: #fff;
  background: #000;
}
header {
  height: 88px;
  background: #000;
}
header ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header ul li:nth-of-type(2) {
  font-size: 28px;
  color: #fff;
  margin: 4px 0 0 50px;
  text-align: center;
}
.nav-content {
  height: 100%;
  background: #000;
}
.smoa-con {
  width: 730px;
  height: 253px;
  /* border: 1px solid #fff; */
  margin-top: 5px;
  margin-left: 12px;
  border-bottom: 1px #666666 solid;
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* line-height: 150px; */
}
.smoa-con img {
  width: 288px;
  height: 191px;
  border-radius: 8%;
  /* line-height: 125px; */
  margin-left: 3px;
}
.smoa-con ul {
  margin-left: 6px;
  width: 420px;
  height: 190px;
  flex-direction: column;
  padding: 10px;
}

.smoa-con ul li {
  width: 300px;
  text-overflow: ellipsis;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  /* height: 10px; */
  margin-top: 15px;
  font-size: 28px;
  font-weight: 100;
}

.smoa-con ul li:nth-of-type(1) {
  font-size: 30px;
  font-weight: bold;
  margin-top: 5px;
}
.smoa-con ul li:nth-of-type(2) {
  /* width: 20px; */
  /* border: 1px solid #fff; */
  height: 60px;
}

.smoa-con ul li:nth-of-type(3) {
  font-size: 30px;
  font-weight: bold;
  /* margin-top: 30px; */
}
</style>